<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日笔记</title>
</head>
<body>
.box {
/*绝对定位，如果父级不是默认定位，那绝对定位就相对父级定位*/
/*如果父级是默认定位，那绝对定位就根据视口定位*/
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #0eee06;
}
main {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
/*absolute绝对固定  relative相对固定根据自己本身的位置去通过 上下左右去调整*/
position: absolute;
top: 100px;
left: 100px;
z-index: 2;/*默认是1，层级关系要在同一个父级下*/
}
.box1 {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
}
<div class="box">
    <main></main>
    <div class="box1"></div>

</div>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.main {
width: 100%;
overflow: hidden;/*overflow溢出部分样式, hidden隐藏*/
}
.one {
width: 30%;
height: 600px;
background-color: red;
float: left;
}
.two {
width: 30%;
height: 600px;
background-color: #0eee06;
float: right;
margin-right: 5%;
}
.three {
width: 30%;
float: right;
height: 600px;
background-color: blue;
}
.footer {
width: 100%;
height: 50px;
background-color: fuchsia;
/*clear: both;清除浮动*/
}
<div class="main">
    <div class="one"></div>
    <div class="three"></div>
    <div class="two"></div>
    <div style="clear: both"></div>
    <div class="footer">123111111</div>
    <p>1212</p>
</div>
html,body {
width: 100%;
height: 100em;
padding: 0;
margin: 0;
overflow-y: scroll;
}
.main {
width: 100%;
height: 100px;
background-color: red;
position: fixed;/*固定定位,不会根据滚定条滚定能改变，而是一直停在在视口上*/
top: 0;
}
<div class="main"></div>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.main {
width: 99%;
margin: 0 auto;
height: 100px;
margin-top: 300px;
background-color: red;
/*粘性定位，滚动条到达设置的位置再进行位置固定，就是设置它的位置之后，视口到达他设置的位置之后，他将固定位置不在移动，*/
position: sticky;
top: 0 ;
}
<div class="main"></div>
</body>
</html>